<template>
  <div class="window_top_wrap">
    <div class="window_main_wrap_75">
      <div class="login_scnav_wrap_new">
        <div class="header_new">
          <my-header></my-header>
        </div>
      </div>
    </div>

    <div class="body_main">
      <div class="width">
        <div class="top_tit" style="height: 68px">
          <div class="big_tit">
            <i class="baoming_icon"></i>
            长沙市小学学区范围
            <select
              name="area"
              class="sel_green"
              v-model="countiesId"
              @change="updateCounties(countiesId)"
            >
              <option
                :value="item.countiesId"
                v-for="(item, index) in countiesList"
                :key="index"
              >
                {{ item.countiesName }}
              </option>
            </select>
          </div>
          <p class="top_tit_tips" style="display: none">
            特别提示：2022年长沙城区小学学区划分信息已经公布。网上报名时间为4月11日至4月25日（含）；报名截止后，已录入报名系统的信息不能修改。
          </p>
        </div>
        <div class="Content">
          <div class="cnt_box">
            <table
              class="table cqczzsrxbm_table"
              width="100%"
              cellpadding="0"
              cellspacing="2"
              border="0"
            >
              <tbody>
                <tr class="st2">
                  <td width="20%">学校/片区</td>
                  <td width="8%">咨询电话</td>
                  <td width="50%">学区范围</td>
                  <td width="17%">操作</td>
                </tr>
                <tr
                  class="st1"
                  v-for="(item, index) in schoolList"
                  :key="index"
                >
                  <td>{{ item.schoolName }}</td>
                  <td>{{ item.schoolPhone }}</td>
                  <td>
                    {{ item.schoolRange }}
                  </td>
                  <td class="txtcenter">
                    <span
                      class="btn_green_white"
                      style="padding: 0 15px"
                      @click="clickRegistrationInfo(item)"
                      >提交报名资料</span
                    >
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer bgwhite">
      主办单位：湖南省长沙市教育局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        style="color: #929292"
        >备案号: 湘ICP备05005530号-1 </a
      >本网站由长沙市教育局信息中心承办
    </div>
  </div>
</template>

<script>
import counties from "@/api/counties.js";
import school from "@/api/school.js";

export default {
  name: "IndexArea",

  data() {
    return {
      countiesList: {},
      countiesId: "",
      schoolGrade: "",
      schoolForm: this.initSchool(),
      schoolList: {},
    };
  },

  mounted() {
    this.countiesId = this.$route.params.countiesId;
    this.schoolGrade = this.$route.params.schoolGrade;
    console.log("countied===>", this.countiesId);
    this.selectsCountiesList();
    this.selectsSchools();
  },
  /**
   * 重复进入相同的路由调用的钩子函数
   */
  // activated() {
  //   console.log("countied2===>", this.countiesId);

  // },

  methods: {
    initSchool() {
      return {
        countiesId: null,
        schoolGrade: null,
      };
    },
    /**
     * 查询所有的counties
     */
    selectsCountiesList() {
      counties
        .selects()
        .then((res) => {
          let data = res.data;
          console.log("IndexArea get Counties List:", data);
          if (data.ok) {
            this.countiesList = data.data.data;
            this.countiesId = this.$route.params.countiesId;
            console.log("对比:", this.countiesId);
          } else this.$message.error("selects Counties List fail");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 更新县区
     */
    updateCounties(countiesId) {
      console.log("adfasdfasdfasdfa");
      this.countiesId = countiesId;
      this.selectsSchools();
      this.$router.push({
        path: `/index_area.html/${this.schoolGrade}/${countiesId}`,
      });
    },
    /**
     * 根据学校等级，以及县区id查询旗下的所有的学校
     */
    selectsSchools() {
      console.log("调用查询学校的方法");
      this.schoolForm.countiesId = this.countiesId;
      this.schoolForm.schoolGrade = this.schoolGrade;
      school
        .selects(this.schoolForm)
        .then((res) => {
          let data = res.data;
          console.log("相对应的学校信息:", data);
          if (data.ok) {
            this.schoolList = data.data;
          } else this.$message.error("获取学校信息失败");
        })
        .catch((err) => {
          console.log(err);
        });
      // 将表单数据清空
      this.schoolForm = this.initSchool();
    },
    /**
     * 点击提交报名资料
     */
    clickRegistrationInfo(schoolInfo) {
      this.$router.push({
        path: `/primary_registration_info.html/${schoolInfo.schoolGrade}/${schoolInfo.countiesId}/${schoolInfo.schoolId}`,
      });
    },
  },
};
</script>

<style scoped>
.Content {
  margin-bottom: 20px;
}
</style>